<template>
	<view class="container">
	<kefu :qq="parseInt(gConfig.common_app_customer_service_tel)" v-if="gConfig.common_app_is_online_service=='1'"></kefu>
		<view class="user-section">
			<image class="bg" src="/static/img/user-bg.jpg"></image>
			<view class="user-info-box" @tap="navToFilter('/pages/member/userInfo')">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatar || '/static/icon/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username" v-if="isLogin">{{userInfo.nickname || '未设置'}}</text>
					<text class="username" v-else>游客</text>
				</view>
				<!-- #ifdef MP -->
				<view class="info-set">
					<text class="iconfont icon-zixun"></text>
					<text class="iconfont icon-shezhi" @tap="navToFilter('/pages/member/setting')"></text>
				</view>
				<!-- #endif -->
			</view>
			<view class="vip-card-box">
				<image class="card-bg" src="/static/img/vip-card-bg.png" mode=""></image>
				<view class="b-btn" v-if="!isLogin" @tap="navTo('/pages/member/login')">
					立即开通
				</view>
				<view class="tit">
					<text class="iconfont icon-zuanshi"></text>
					魔方商城会员
				</view>
				<text class="e-m">SHOPPING</text>
				<text class="e-b">开通会员，畅享购物</text>
			</view>
		</view>

		<view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" src="/static/img/arc.png"></image>
			<view class="tj-gg" v-if="memberCenterData.common_user_center_notice !== ''">
				{{memberCenterData.common_user_center_notice}}
			</view>
			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">{{memberCenterData.user_order_count}}</text>
					<text>订单总数</text>
				</view>
				<view class="tj-item">
					<text class="num">{{memberCenterData.user_order_count}}</text>
					<text>收藏总数</text>
				</view>
				<view class="tj-item">
					<text class="num">{{memberCenterData.integral}}</text>
					<text>积分总数</text>
				</view>
			</view>
			<!-- 订单 -->
			<view class="order-section" v-if="isLogin">
				<view class="order-item" @click="navToFilter('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
					<text class="iconfont icon-dingdan"></text>
					<text>全部订单</text>
				</view>
				<view class="order-item" @click="navToFilter('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
					<text class="iconfont icon-daifukuan"></text>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navToFilter('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
					<text class="iconfont icon-daishouhuofuben"></text>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="refund('/pages/refund/refundList')" hover-class="common-hover" :hover-stay-time="50">
					<text class="iconfont icon-tuikuan"></text>
					<text>退款/售后</text>
				</view>
			</view>
			<!-- 浏览历史 -->
			<view class="history-section icon">
				<view class="sec-header">
					<text class="iconfont icon-liulan-mian"></text>
					<text>浏览历史</text>
				</view>
				<scroll-view scroll-x class="h-list">
					<image @tap="navToGoods(item)" :src="item.images" mode="aspectFill" v-for="(item,index) in browse"
					 :key="index"></image>
				</scroll-view>
				<!-- <list-cell icon="icon-wallet-fill" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></list-cell> -->
				<!-- #ifndef H5 -->
				<list-cell icon="icon-fenxiang" iconColor="#9789f7" title="快乐分享" tips="邀请好友赢10万大礼" @tap="share"></list-cell>
				<!-- #endif -->
				<view class="list" v-for="(item,index) in memberCenterData.navigation" :key="index" @tap="navTo(item.event_value)">
					<image :src="item.images_url" class="img"></image>
					<text class="left">{{item.name}}</text>
					<view class="right">{{item.desc}}<image src="/static/icon/left-gray-arrow.png"></image>
					</view>

				</view>
			
			</view>
		</view>
		<!-- fenxiang -->
		<!-- #ifdef APP-PLUS-->
			<app-share :strShareUrl="shareUrl"
					   :strShareTitle="shareTitle"
					   :strShareSummary="shareSummary"
					   :strShareImageUrl="shareImageUrl"
					   @tap="clickShare"
					   ref="appShare"></app-share>
		<!-- #endif -->

	</view>
</template>
<script>
	import listCell from './components/mix-list-cell';
	import kefu from '@/components/yu-kefu.vue'
	//#ifdef APP-PLUS
		import appShare from '@/components/appShare/appShare.vue'
	//#endif
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			//#ifdef APP-PLUS
				appShare,
			//#endif
			listCell,
			kefu
		},
		data() {
			return {
				gConfig:[],
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				isLogin: false,
				userInfo: [],
				browse: {}, //浏览记录，没有登陆的情况下，浏览记录用，首页调取过的  猜你喜欢的
				memberCenterData: [],
				shareUrl: '',
				shareTitle: '快来围观，到底发生了什么',
				shareSummary: '哇，真的很精彩，什么你想看的都有',
				shareImageUrl: '/static/sharemenu/share.jpg'
			}
		},
		onLoad() {
			this.gConfig=uni.getStorageSync('gConfig');
			this.browse = uni.getStorageSync("likeData");
		},
		onShow() {
			let self = this;
			this.userInfo = uni.getStorageSync("gUserInfo");
			let memberCenterUrl = this.requestUrl.memberCenter;
			this.util.request(memberCenterUrl, 'post', function(res) {
				if (res.data.code == 0 && res.data.data) {
					self.memberCenterData = res.data.data;
				}
			})
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/member/setting');
			} else if (index === 1) {
				uni.navigateTo({
					url: '/pages/article/list?cid=25'
				})
			}
		},
		// #endif
		methods: {
			//分享
			share(){
				// #ifdef APP-PLUS
				this.shareUrl=this.requestUrl.host + '/h5/#/';
				this.$refs.appShare.share();
				// #endif
			},
			/**
			 * 统一跳转接口,拦截未登录路由 需要用户登录以后才能操作的，拦截
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navToFilter(url) {
				if (!this.isLogin) {
					url = '/pages/member/login';
				}
				uni.navigateTo({
					url
				})
			},
			// 跳转到浏览记录
			navToGoods(item) {
				let url='/pages/product/product?id=';
				if(item.hasOwnProperty("goods_id")){
					url=url + item.goods_id;
				}else{
					url=url + item.id;
				}
				uni.navigateTo({
					url
				})
			},
			// 不必登录就能操作的，不拦截
			
			navTo(url) {
				
				uni.navigateTo({
					url
				})
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			refund(url){
				uni.navigateTo({
					url:url
				})
			}
		},
		watch:{
			memberCenterData:function(){
				//用户状态的切换
				if (this.userInfo) {
					this.isLogin = true;
					// 把用户的浏览数据，跟商品浏览次数从高到底的数据，拼接起来
					this.browse = this.memberCenterData.user_goods_browse_list.concat(this.browse);
					
				} else {
					this.isLogin = false;
					this.userInfo = [];
				}
			}
		}
	}
</script>
<style lang='scss' scoped>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 520upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $uni-font-size-lg + 6upx;
			color: $uni-text-color;
			margin-left: 20upx;
		}

		.info-set {
			position: absolute;
			right: 0rpx;
			top: 50rpx
		}

		.info-set text {
			font-size: $uni-font-size-lg + 20upx;
			color: $uni-text-color-zhu;
			margin-right: 20rpx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $uni-font-size-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.icon-zuanshi {
				color: #f6e5a3;
				margin-right: 16upx;
				font-size: $uni-font-size-lg
			}

			.icon-zuanshi:before {
				content: '\e70e'
			}
		}

		.e-b {
			font-size: $uni-font-size-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		margin-top: -250upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-gg {
		background: #FFFFFF;
		border-radius: 10rpx;
		text-align: left;
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $uni-font-size-sm;
			color: #75787d;
		}

		.num {
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $uni-font-size-base - 2upx;
			color: $uni-text-color;
		}

		.iconfont {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			align-items: center;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			line-height: 40upx;
			padding:30rpx 20rpx;
			width:100%;
			box-sizing: border-box;
			.iconfont {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
				float: left;
			}
			text{
				float: left;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;
			box-sizing: border-box;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

	.list {
		background: $uni-bg-color;
		padding: 30upx 20upx;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.list .img {
		width: 40rpx;
		height: 40rpx;
		float: left;
	}

	.list .left {
		float: left;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		margin-left: 16rpx;
	}

	.list .right {
		float: right;
		color: $uni-text-color-grey;
		font-size: $uni-font-size-sm + 3upx;
	}
	.list .right image {
		width: 30rpx;
		height: 30rpx;
		float: right;
		margin:4rpx 0 0 0
	}
</style>
